<template>
	<view class="content">
		<view v-for="item in tableData" :key="item.id">
			<uni-card :title="item.name" :extra="item.location">
				<view v-if="item.state=='已开始'">状态：{{item.state}}</view>
				<view v-if="item.state=='未开始'">还剩名额：{{item.surplus}}</view>
				<view>活动时间：{{item.time}}</view>
				<view>
					<!-- <button type="primary" style="margin-top: 10rpx;" @click="sign(item.id)" >预约</button> -->
					<button v-if="item.surplus!=0&&item.state=='未开始'" type="primary" style="margin-top: 10rpx;"
						@click="dialogToggle(item.id,item.name)">报名</button>
				</view>
			</uni-card>
		</view>
		<view v-if="tableData.length === 0" style="text-align: center; font-size: 48rpx; height: 100vh; line-height: 100vh; color:rgb(127,127,126) ;">
			最近没有活动哦！
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="再次确认" :content="`你将报名${name}活动!待审核!`"
					@confirm="dialogConfirm" ></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				user: {},
				name: '',
				activityid: null,
			}
		},
		onLoad() {
			console.log( uni.getSystemInfoSync().windowHeight);
			this.user = uni.getStorageSync('user');
			this.loading();
		},
		onPullDownRefresh() {
			this.request({
				url: '/activity/page/front',

			}).then(res => {
				if (res.code === '0') {
					setTimeout(function() {
						uni.stopPullDownRefresh();
						setTimeout(function() {
							uni.showToast({
								title: '加载成功'
							})
						}, 200);
					}, 800);
				}
				this.tableData = res.data;
				console.log(this.tableData);
			})
		},
		methods: {
			loading() {
				this.request({
					url: '/activity/page/front',

				}).then(res => {
					this.tableData = res.data;
				})
			},
			dialogToggle(activityId,activityName) {
				
				this.activityId = activityId;
				this.name=activityName;
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
					this.request({
						url: '/activitySign',
						method: 'POST',
						data: {
							userId: this.user.id,
							activityId: this.activityId
						}
					}).then(res => {
						if (res.code === '0') {
							uni.showToast({
								title: '报名成功'
							})
						}
						this.loading();
					});
			},
			// dialogClose() {
			// 	console.log('点击关闭')
			// },
			// sign(activityId) {
			// 	this.request({
			// 		url: '/activitySign',
			// 		method: 'POST',
			// 		data: {
			// 			userId: this.user.id,
			// 			activityId: activityId
			// 		}
			// 	}).then(res => {
			// 		if (res.code === '0') {
			// 			uni.showToast({
			// 				title: '报名成功'
			// 			})
			// 		}
			// 	})
			// },
		
		}
	}
</script>

<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: aqua; */
	}
</style>
